<template>
  <view class="p-page">
    <u-navbar
      :placeholder="true"
      bg-color="transparent"
      :auto-back="true"
    ></u-navbar>

    <view class="mt-llg p-base u-flex u-flex-column u-flex-items-center">
      <u-image
        src="@/static/logo.png"
        :width="60"
        :height="60"
        :radius="10"
      ></u-image>
      <view class="mt-sm">
        <u-text text="欢迎登录" :size="20"></u-text>
      </view>
    </view>

    <view class="p-base">
      <u-form
        label-position="top"
        labelWidth="auto"
        :model="formData"
        :rules="formRules"
        ref="formRef"
      >
        <u-form-item prop="account">
          <u-input
            v-model="formData.account"
            :custom-style="{ backgroundColor: 'white' }"
            @focus="$refs.formRef.clearValidate('account')"
          >
            <view slot="prefix" class="u-flex-y-center">
              <view class="ms-base me-sm">用户</view>
              <u-line
                direction="col"
                length="26px"
                :style="{ margin: '0 var(--space-base)' }"
              ></u-line>
            </view>
          </u-input>
        </u-form-item>
        <u-form-item prop="password">
          <u-input
            v-model="formData.password"
            type="password"
            :custom-style="{ backgroundColor: 'white' }"
            @focus="$refs.formRef.clearValidate('password')"
          >
            <view slot="prefix" class="u-flex-y-center">
              <view class="ms-base me-sm">密码</view>
              <u-line
                direction="col"
                length="26px"
                :style="{ margin: '0 var(--space-base)' }"
              ></u-line> </view
          ></u-input>
        </u-form-item>
      </u-form>

      <view class="mt-llg">
        <u-button type="primary" @tap="handleLogin">登录</u-button>
      </view>
      <view class="mt-base">
        <u-button @tap="handleToRegister">注册</u-button>
      </view>

      <view class="mt-llg text-center text-primary">
        <text :style="{ fontSize: '14px' }">《服务条款》《隐私权政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapActions } from "vuex";
import { validateRequired } from "@/utils/form-validators";
import apiAuth from "@/api/auth";

export default {
  data() {
    return {
      formData: {
        account: "",
        password: "",
      },
      formRules: {
        // 登录时不用 trigger 触发验证时为了交互流畅
        account: {
          validator: (rule, value, callback) =>
            validateRequired(rule, value, callback, { label: "用户名" }),
        },
        password: {
          validator: (rule, value, callback) =>
            validateRequired(rule, value, callback, { label: "密码" }),
        },
      },
      loading: false,
    };
  },
  methods: {
    ...mapActions({ updateAuth: "updateAuth" }),
    handleLogin() {
      this.$refs.formRef
        .validate()
        .then(() => {
          uni.showLoading({ title: "正在登录", mask: true });

          apiAuth
            .login({
              account: this.formData.account,
              password: this.formData.password,
            })
            .then((res) => {
              uni.hideLoading();
              this.updateAuth(res.data);
              uni.switchTab({
                url: "/pages/HomeView/HomeView",
              });
            })
            .catch(() => uni.hideLoading());
        })
        .catch();
    },
    handleToRegister() {
      uni.navigateTo({
        url: "/pages/RegistrationView/RegistrationView",
      });
    },
  },
};
</script>

<style></style>
